<template>
    <el-header class="header">
        <div class="header-left">
        </div>
        <div class="header-right">
            <el-dropdown>
                <span class="user-info">
                    <el-avatar :size="32" :src="userAvatar" />
                    <span class="username">{{ username }}</span>
                    <el-icon class="el-icon--right"><CaretBottom /></el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>个人中心</el-dropdown-item>
                        <el-dropdown-item>设置</el-dropdown-item>
                        <el-dropdown-item divided>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </el-header>
</template>

<script setup>
import { ref } from 'vue'
import { CaretBottom } from '@element-plus/icons-vue'

const username = ref('用户名')
const userAvatar = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
</script>

<style scoped>
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    height: 60px;
}

.header-left h2 {
    margin: 0;
    color: #409EFF;
}

.user-info {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.username {
    margin: 0 8px;
    font-size: 14px;
    color: #606266;
}

.el-dropdown {
    display: flex;
    align-items: center;
}
</style>
